<template>
    <div class="title">默认主题：</div>

    <div class="color-list">
        <div
            v-for="item in defaultColor"
            :key="item.type"
            @click="handleTypeClick(item)"
        >
            <a-button>{{ item.name }}主题</a-button>
        </div>
    </div>

    <div class="title">自定义颜色:</div>
    <ColorPicker
        format="rgb"
        shape="square"
        :disableHistory="true"
        @pureColorChange="pureColorChange"
        :pureColor="primaryCol"
        :isWidget="true"
    >
        <template #extra>
            <div class="btn-reset" @click="resetColor">重置</div>
        </template>
    </ColorPicker>
</template>

<script setup>
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/theme';
import variables from '@/scss/variables.module.scss';
const themeStore = useThemeStore();
const { themeConfig, primaryCol, currentTheme } = storeToRefs(themeStore);
const defaultColor = ref([
    {
        name: '浅色',
        color: '#fff',
        type: 'light',
    },
    {
        name: '深色',
        color: '#000',
        type: 'dark',
    },
]);

const html = document.documentElement;
const handleTypeClick = (item) => {
    html.setAttribute('data-theme', item.type);
    currentTheme.value = item.type;
};

const pureColorChange = (e) => {
    primaryCol.value = e;
};
// 重置主题色
const resetColor = () => {
    primaryCol.value = '#1677ff';
};
</script>

<style lang="scss">
.title {
    color: var(--font-color);
    margin: 10px;
}
.color-list {
    display: flex;
}

.btn-reset {
    width: 100%;
    border: 1px solid #dcdbdb;
    padding: 5px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
}
</style>
